﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctx}/common/common.css" media="all">
    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>
    
    <style type="text/css">
        .rowtop {
            padding: 10px;
        }
    </style>
</head>
<body>
<form class="layui-form layui-container" method="post" action="${ctx}/enterprise/${action}"  enctype="multipart/form-data">
    <input type="hidden" name="id" value="${entity.id}"/>
    <input type="hidden" name="companyId" value="${companyId}"/>
    <div class="layui-row rowtop" style="margin-top: 20px;">
        <div class="layui-col-md5">
            <label class="layui-form-label">证书名称<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <input type="text" name="nameOfQualification" required value="${entity.nameOfQualification}"
                       lay-verify="required" placeholder="请输入证书名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md5">
            <label class="layui-form-label">首次发证日期<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <input type="text" name="firstDate" id="first_date"
                       value="${entity.firstDate}"
                       placeholder="请选择首次发证日期" lay-verify="required" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-row rowtop">
        <div class="layui-col-md5">
            <label class="layui-form-label">本次发证日期<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <input type="text" name="thisDate" id="this_date"
                        value="${entity.thisDate}"
                        placeholder="请选择本次发证日期" lay-verify="required" autocomplete="off"
                        class="layui-input">
            </div>
        </div>
        <div class="layui-col-md5">
            <label class="layui-form-label">有效期至<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <input type="text" name="endDate" id="end_date"
                        value="${entity.endDate}"
                        placeholder="请选择有效期至" lay-verify="required" autocomplete="off"
                        class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-row rowtop">
        <div class="layui-form-item layui-col-md5">
            <label class="layui-form-label">证书<span style="color: red">*</span></label>
            <div class="layui-input-block" id="materialsImg">
                <button type="button" class="layui-btn" id="test1">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <c:if test="${!empty entity.fileUrl && fn:length(entity.fileUrl)>0  && entity.fileUrl != 'null' }">
                    <img src="${ctx}${entity.fileUrl}" class="imga" style="width: 100px;height: 100px;">
                </c:if>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" id="formBtn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            <button type="button" id="rollback" class="layui-btn layui-btn-primary">返回</button>
        </div>
    </div>
</form>

<script>
    // 使用 Layui 的表单模块
    layui.use('form', function () {
        var form = layui.form;

        // 监听表单提交
        form.on('submit(formDemo)', function (data) {
            // 打印表单数据到控制台
            console.log("表单提交数据：", data.field);
            layer.load(1, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });
            // $("#formBtn").attr("disabled", true); // 禁用提交按钮，防止重复提交
        });
    });
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#first_date' //指定元素
            , type: 'date'
        });
        laydate.render({
            elem: '#this_date' //指定元素
            , type: 'date'
        });
        laydate.render({
            elem: '#end_date' //指定元素
            , type: 'date'
        });
    });
    layui.use('upload', function(){
        var $ = layui.$;
        var upload = layui.upload;
        var count=0;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/upload/' //上传接口
            ,accept: 'images'
            ,multiple:false
            ,auto:false
            ,bindAction:"#uploadFile"
            ,choose:function(obj){
                //选择文件
                //将每次选择的文件追加到文件队列
                var files = obj.pushFile();
                //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                obj.preview(function(index, file, result) {
                    $(".imga").remove();
                    $("#materialsImg").append('<img src="'+result+'" class="imga" style="width: 100px;height: 100px;">');
                })
            }
        });
    });
    // 返回按钮点击事件
    document.getElementById("rollback").addEventListener("click", function () {
        window.history.back(); // 返回上一页
    });
</script>
</body>
</html>
